import React, { Component } from 'react';
import './App.css';
import ParentA from './components/parentA'
import ParentB from './components/parentB'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap';
class App extends Component {
  constructor() {
    super()
    this.state = {
      flag: true,
      VALUE: []
    }
  }
  addList(item) {

    if (!this.state.VALUE.find(val => item === val)) {
      this.state.VALUE.push(item)
    } else {
      this.state.VALUE.splice(this.state.VALUE.findIndex(val => item === val), 1)
    }
    this.setState({
      VALUE: this.state.VALUE
    })
  }
  open() {
    this.state.VALUE = []
    this.setState({
      flag: !this.state.flag
    })
  }
  render() {
    return (
      <div className="App">
        <ParentA flag={this.state.flag} val={this.state.VALUE} open={this.open} this={this} />
        <ParentB addList={this.addList} val={this.state.VALUE} flag={this.state.flag} this={this} />
      </div>
    )
  }
}

export default App;
